import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Form, Button, InputNumber, Affix, Popover } from 'antd';
import { SketchPicker } from 'react-color';
import FormCondition from '@/components/FormCondition';
import DrawerCondition from '@/components/DrawerCondition';
import aliOssUpload from '@/utils/aliOssUpload';
import moment from 'moment';
const FormItem = Form.Item;
const ProduceForm = (props) => {
    const { dispatch, visible = {}, onClose, handleCallback, loading } = props;
    const { show = false, detail = {} } = visible;
    const { id } = detail;
    const [form] = Form.useForm();
    const [color, setColor] = useState('#1890ff')
    const fetchMenuEdit = () => {
        form.validateFields().then(async (values) => {
            const { cover } = values
            const img = await aliOssUpload(cover)
            dispatch({
                type: 'answering/fakeSaveSubject',
                payload: {
                    ...values,
                    color,
                    cover: img.toString(),
                    id
                },
                callback: () => {
                    onClose()
                    handleCallback()
                }
            })
        });
    };

    useEffect(() => {
        if (!show) {
            setColor('#1890ff')
        } else {
            if (id && detail.color) {
                setColor(detail.color)
            }
        }
    }, [show]);
    const formItems = [
        { label: '学科名称', name: 'subjectName', },
        { label: '封面', name: 'cover', type: 'upload', maxFile: 1 },
        {
            label: '状态', name: 'status', type: 'select', select: {
                0: '禁用',
                1: '启用'
            }
        },
        {
            type: 'noForm',
            formItem: <FormItem
                key={'color'}
                name='color'
                required={true}
                rules={{ required: false }}
                label='颜色'
            >
                <Popover content={<SketchPicker
                    color={color}
                    onChange={(e) => {
                        setColor(e.hex)
                    }}></SketchPicker>} trigger={['click']} placement={'bottom'}>
                    <div className='design-color-set'>
                        <div style={{
                            background: color, width: '30px',
                            height: '18px',
                            borderRadius: '2px',
                            border: '1px solid #999999'
                        }} ></div>
                    </div>
                </Popover>
            </FormItem>
        },

    ];

    const modalProps = {
        title: `${detail.id ? '编辑学科' : '新增学科'}`,
        visible: show,
        onClose,
        footer: (
            <Button type="primary" loading={loading} onClick={fetchMenuEdit}>
                确定
            </Button>
        ),
    };

    return (
        <DrawerCondition {...modalProps}>
            <FormCondition form={form} formItems={formItems} initialValues={detail}></FormCondition>
        </DrawerCondition>
    );
};

export default connect(({ loading, }) => ({

    loading: loading.effects['answering/fakeSaveSchedule'],
}))(ProduceForm);
